/*tap页面*/
#carouselId.carousel .carousel-item, #carouselId.carousel .carousel-item img {
    height: 600px;
}

#carouselId .carousel-control-prev-icon {
    background-image: url("/static/icon/icon-left.svg");
}
#carouselId .carousel-control-next-icon {
    background-image: url("/static/icon/icon-right.svg");
}
#carouselId .carousel-control-prev-icon, .carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

#carouselId .carousel-indicators {
    gap: 20px;
}
#carouselId .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 100%;
}

.tap-container .tap {
    width: 12.5%;
    height: 440px;
    transition: all .3s;
}
.tap-container .tap img {
    object-fit: cover
}

.tap-container .tap-text {
    align-items: center;
    justify-content: center;
    transition: all .3s;
}

.tap-container .tap-text2 {
    opacity: 0;
}
.tap-container .tap.active {
    width: 50%;
    transition: all .3s;
}
.tap-container .tap.active .tap-text {
    align-items: start!important;
    justify-content: end!important;
    padding: 30px;
    transition: all .3s;
}
.tap-container .tap.active .tap-text .tap-text2 {
    opacity: 1;
    transition: all .3s;
}
/*tap页面*/

@media (max-width: 768px) {
    #carouselId.carousel .carousel-item, #carouselId.carousel .carousel-item img {
        height: 300px;
    }

    #carouselId .carousel-caption .display-6 {
        font-size: 1rem;
    }
    #carouselId .carousel-caption .fs-4 {
        font-size: 0.95rem!important;
    }


    .tap-container .tap {
        width: 50%;
        height: 440px;
        transition: all .3s;
    }
    .tap-container .tap.active {
        width: 100%;
        transition: all .3s;
    }

    .categories-carousel .owl-nav .owl-prev {
        left: 0!important;
    }
    .categories-carousel .owl-nav .owl-next {
        right: 0!important;
    }

    .categories-carousel .owl-nav .owl-prev, .categories-carousel .owl-nav .owl-next {
        top: -55px!important;
        transform: scale(0.8);
    }
    .carousel-indicators {
        gap: 40px!important;
    }
}

.categories-carousel .owl-nav .owl-prev,
.categories-carousel .owl-nav .owl-next {
    position: absolute;
    top: 50%;
    z-index: 99;
    border-radius: 100%;
    transition: 0.5s;
}

.categories-carousel .owl-nav .owl-prev {
    left: -35px;
}
.categories-carousel .owl-nav .owl-next {
    right: -35px;
}
